<!DOCTYPE html>
<html>
<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="utf-8">
    <title>管理文案哲理</title>
    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>

        .text-div::-webkit-scrollbar {
            width: 4px; /*  设置纵轴（y轴）轴滚动条 */
            height: 4px; /*  设置横轴（x轴）轴滚动条 */
        }
        /* 滚动条滑块（里面小方块） */
        .text-div::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }
        /* 滚动条轨道 */
        .text-div::-webkit-scrollbar-track {
            border-radius: 0;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }
        .top{
            margin-bottom:10px;
            display: flex;
            gap: 22px;
            background:linear-gradient(to top, #ffffff 0%, #ddeaff 100%)
        }
        .ul-body{
            display: flex;
            gap: 22px;
        }
        .img{
            width: 157px;
            height: 157px;
            padding: 8px;
            box-sizing: border-box;
            flex-shrink: 0;
            border: 1px solid #d5d5d5;
        }
        .color{
            box-sizing: border-box;
            margin: 0;
            align-items: center;
            color: #fff;
            width: 100%;
            height: 100%;
            font-size: 24px;
            font-weight: 500;
            display: flex;
            justify-content: center;
            background-color: rgb(196, 78, 24);
        }
        .content{
            display: flex;
            justify-content: center;
            padding: 27px 0;
            flex-direction: column;
        }
        .title{
            box-sizing: border-box;
            margin: 0;
            color: #000;
            font-size: 24px;
            font-weight: 500;
        }
        .desc{
            box-sizing: border-box;
            margin: 0;
            color: #878787;
            font-size: 14px;
            margin-top: 12px;
        }
        .list_2KZ_8{
            margin: 0;
            display: flex;
            flex-direction: column;
            padding: 20px;
            gap: 25px;
            list-style: none;
            border-radius: 8px;
            border: 1px solid #edf0f2;
        }
        .sentenceCard{
            margin: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .link{
            margin: 0;
            background-color: transparent;
            text-decoration: none;
            color: #000;
            font-size: 16px;
            font-weight: 500;
        }
        .bottom{
            margin: 0;
            width: 100%;
            height: 16px;
            text-align: right;
            color: #6f7070;
            font-size: 14px;
        }
        .index{
            line-height: 1.5;
            box-sizing: border-box;
            margin: 0;
            color: #6f7070;
            font-size: 14px;
        }
        .transparent-button {
            background-color: transparent; /* 设置背景透明 */
            border: none; /* 去掉边框 */
            color: #878787; /* 设置文字颜色，例如：Tomato色 */
            cursor: pointer; /* 设置鼠标指针 */
            padding: 10px 20px; /* 可选：设置内边距 */
            font-size: 16px; /* 可选：设置字体大小 */
            outline: none; /* 去掉点击时的外边框 */
        }




    </style>
</head>
<body style="width: 100%;height: 100%;margin: 0px;overflow: hidden;background-color:#fff">
<div class="bodydiv">
    <div id="app" >

        <div id="textDiv" class="text-div" style="padding-left:20px;overflow: auto; margin: 0 auto;" @scroll="handleScroll">
            <div class="card">
                <div class="top">
                    <div class="img">
                        <h2 class="color" style="background-color: rgb(196, 78, 24);">
                            书籍名句
                        </h2>
                    </div>
                    <div class="content">
                        <div class="title">关于书籍名句的句子<button class="transparent-button"><i class="el-icon-tickets"></i>其他文案</button></div>
                        <div class="desc">共收录100条的句子</div>
                    </div>
                </div>
            </div>
            <ul class="list_2KZ_8">
                <li v-for="(item,index) in textData">
                    <div class="sentenceCard">
                        <div class="ul-body">
                            <div class="index">.{{index<10?"0"+(index+1):(index+1)}}</div>
                            <a href="/posts/368fd97a-d066-427d-9180-c7591456a607" class="link">
                                <span v-html="item.description"></span>
                            </a>
                        </div>
                        <div data-v-476cc04e="" class="bottom">
                            {{item.uploaderName}}
                        </div>
                    </div>
                </li>
            </ul>

        </div>

       <#-- <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 30, 50,100,200]"
                    :current-page="pageNo"
                    :page-size="pageSize"
                    layout="total, sizes,prev, pager, next, jumper"
                    :total="totalSize">
            </el-pagination>
        </div>-->
    </div>




</div>
</body>
<script>
    var token = localStorage.getItem("token");


    new Vue({
        el:'#app',
        data:{
            textData:[],
            pageSize:20,
            pageNo:1,
            totalSize:0,
            typeList:[],
            loading: false
        },
        methods:{
            /**
             * 滚动分页
             */
            handleScroll() {
                const container = document.getElementById('textDiv');
                if (
                    container.scrollTop + container.clientHeight >= window.innerHeight &&
                    !this.loading
                ) {
                    var maxPage = this.calculateTotalPages(this.totalSize,this.pageSize);//计算最大页码
                    if(this.pageNo<maxPage){
                        this.pageNo++;//页码加一
                    }else {
                        return;
                    }
                    // 滚动到底部且没有正在加载新内容时，触发分页请求
                    this.loading = true;
                    this.searchResource();
                }
            },
            /*
            * 根据总条数和每页条数计算总页码
            * */
            calculateTotalPages(totalItems, itemsPerPage) {
                return Math.ceil(totalItems / itemsPerPage);
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.searchResource();
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            searchResource(){
                axios.get('resources/getResourcesList?title=&resourceId=&level=&type=文案哲理&pageNo='+this.pageNo+'&pageSize='+this.pageSize,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.totalSize = resp.data.total;
                        this.textData.push(...resp.data.data);
                        this.loading = false;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        created() {
            this.searchResource();
        }
    })

    window.onload = function() {
        var fullHeightDiv = document.getElementById('textDiv');
        fullHeightDiv.style.height = window.innerHeight + 'px';
    }

</script>

</html>